<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- including ECharts file -->
    <script src="../echarts/echarts.min.js"></script>
</head>
<body>
    <!-- prepare a DOM container with width and height -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        var option = {
            backgroundColor: '#2c343c',
            itemStyle: {
                // shadow size
                shadowBlur: 200,
                // horizontal offset of shadow
                shadowOffsetX: 0,
                // vertical offset of shadow
                shadowOffsetY: 0,
                // shadow color
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                color: '#c23531',
            },
            textStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
            },
            labelLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            },
            series: [
                {
                    name: 'Reference Page',
                    type: 'pie',
                    roseType: true,
                    data: [
                        { value: 400, name: 'Searching Engine' },
                        { value: 335, name: 'Direct' },
                        { value: 310, name: 'Email' },
                        { value: 274, name: 'Alliance Advertisement' },
                        { value: 235, name: 'Video Advertisement' }
                    ]
                }
            ],
            visualMap: {
                // hide visualMap component; use lightness mapping only
                show: false,
                // mapping with min value at 80
                min: 80,
                // mapping with max value at 600
                max: 600,
                inRange: {
                    // mapping lightness from 0 to 1
                    colorLightness: [0, 1]
                }
            }
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);
    </script>
</body>
</html>